<template>
	<view class="chat-page u-flex u-flex-nowrap">
		<scroll-view class="history-wrapper" scroll-y @scrolltoupper="scrollToUpper">
			<view class="history-item" v-for="(item,index) in historys" :key="item.idClient">
				<view class="u-flex u-flex-nowrap top-wrapper" :class="{right:item.flow=='out'}">
					<view class="u-flex u-flex-nowrap main-wrapper">
						<view  class="left-wrapper">
							<view class="arrow"></view>
							<u-avatar :src="avatarSrc"></u-avatar>
						</view>
						<view class="right-wrapper">
							<view class="name">{{item.flow=='out'?userInfo.nick:item.fromNick}}</view>
							<view class="content">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-flex-nowrap u-col-center u-row-center">
					<view class="time">{{item.time | date('yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
			</view>
			<u-empty text="消息为空" mode="list" v-if="historys.length==0"></u-empty>
		</scroll-view>
		<view class="bottom-wrapper u-flex u-flex-nowrap u-row-center u-col-center">
			<u-input v-model="inputVal" type="text" border />
			<u-button class="send-btn" type="primary" shape="circle" :disabled="inputVal==''" @click="sendMsg">发送</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return {
			_nim:null,
			userInfo:null,
			inputVal:'',
			sessionId:'',
			historys:[]
		}
	},
	computed:{
		avatarSrc(){
			return '/static/images/avatar.webp'
		}
	},
	onUnload() {
		console.log('onUnload')
		if(this._nim){
			this._nim.insertLocalSession({
				scene: 'p2p',
				to: this.account,
				done: this.insertLocalSessionDone
			});
		}
	},
	onBackPress(e){
		console.log('onBackPress',e)
	},
	onLoad(option) {
		console.log(option.sessionId)
		const that=this
		const nim=getApp().globalData._nimInstance
		that.userInfo=uni.getStorageSync('userInfo')
		that._nim=nim
		uni.setNavigationBarTitle({
			title:option.nickName
		})
		that.sessionId=option.sessionId
		that.account=option.account
		if(nim){
			console.log('setOptions',nim)
			nim.setCurrSession(option.sessionId)
			nim.getLocalMsgs({
			  sessionId: that.sessionId,//表示单聊场景(p2p)，对方账号为account。
			  limit: 100,
			  done: that.getLocalMsgsDone
			})
			nim.getHistoryMsgs({
				scene: 'p2p',
				to: option.account,
				done: that.getHistoryMsgsDone,
				reverse:true
			})
		}
	},
	methods:{
		getLocalMsgsDone(error, obj) {
		  console.log('获取本地消息' + (!error?'成功':'失败'), error, obj)
			
		},
		
		getHistoryMsgsDone(error, obj) {
			console.log('获取p2p历史消息' + (!error?'成功':'失败'))
			if (!error) {
				console.log(obj.msgs)
				this.historys=obj.msgs
			}
		},
		
		//发送消息
		sendMsg(){
			const that=this
			const nim=getApp().globalData._nimInstance
			if(nim&&that.account!=''&&that.inputVal!=''){
				nim.sendText({
					scene: 'p2p',
					to: that.account,
					text: that.inputVal,
					done: that.sendMsgDone,
					needPushNick:true,//是否需要推送昵称
					isHistoryable:true,//是否存储云端历史
					isPushable:true,//是否需要推送
					isOfflinable:true,//是否要存离线
					isUnreadable:true,//是否计入消息未读数
					isRoamingable:true
				})
			}
		},
		sendMsgDone(error, msg){
			console.log('发送' + msg.scene + ' ' + msg.type + '消息' + (!error?'成功':'失败') + ', id=' + msg.idClient)
			if(!error){
				this.historys.push(msg)
				this.inputVal=""
			}
		},
		
		insertLocalSessionDone(error, obj){
			console.log('插入本地会话记录' + (!error?'成功':'失败'), error, obj);
			if (!error) {
				
			}
		},
		
		scrollToUpper(){
			
		}
	}
}
</script>

<style lang="scss">
.chat-page{
	width: 100vw;
	height: calc(100vh - var(--window-top));
	flex-direction: column;
	align-items: stretch;
	.history-wrapper{
		flex: 0 0 90%;
		height: 90%;
		background-color: rgb(229, 231, 235);
		.history-item{
			padding: 10rpx;
			.top-wrapper{
				&.right{
					justify-content: flex-end;
					.left-wrapper{
						order: 2;
						.arrow{
							left: -36rpx !important;
							transform: rotate(180deg);
						}
					}
					.right-wrapper{
						order: 1;
						.name{
							text-align: right!important;
						}
						.content{
							border-radius: 40rpx 0rpx 40rpx 40rpx!important;
						}
					}
				}
				.main-wrapper{
					align-items: flex-start;
					.left-wrapper{
						position: relative;
						.arrow{
							width: 0px;
							height: 0px;
							border: 15rpx solid white;
							border-right-width: 30rpx;
							border-color: transparent white transparent transparent ;
							position: absolute;
							content: '';
							top:48rpx;
							left:80rpx;
						}
					}
					.right-wrapper{
						margin: 0rpx 35rpx;
						.name{
							margin-bottom: 10rpx;
						}
						.content{
							background-color: white;
							padding: 20rpx;
							border-radius: 0rpx 40rpx 40rpx 40rpx;
							max-width: 70vw;
							overflow-wrap: break-word;
						}
					}
				}
			}
			.time{
				background-color: rgb(209, 213, 219);
				padding: 5rpx 20rpx;
				border-radius: 40rpx;
				color: white;
				margin: 20rpx 0rpx;
			}
		}
	}
	.bottom-wrapper{
		flex: 0 0 10%;
		padding: 0rpx 20rpx;
		.send-btn{
			margin-left:20rpx
		}
	}
}
</style>
